<template>
  <view>
    <!-- 健康行为记录 -->
    <view class="particilars_box_footer">
      <!-- 健康记录 -->
      <van-dropdown-menu :close-on-click-overlay="true" :close-on-click-outside="true" :overlay="true">
        <van-dropdown-item :title="productName" id="productNameItem">
          <view class="pull_down">
            <block v-for="(item,i) in getRecordItem" :key="i">
              <view class="pull_down_text" @click="productNameClick(item.productName,item.id)">
                {{item.productName}}
              </view>
            </block>
          </view>
        </van-dropdown-item>
        <van-dropdown-item :title="tagName" id="tagNameItem">
          <view class="pull_down">
            <view class="pull_down_Item" @click="labelListClick(0,'全部',-1)">
              <view :class="['pull_down_box',labelItemValue == 0?'active':'']">
                全部
              </view>
            </view>
            <view class="pull_down_Item" v-for="(item,i) in labelList" :key="i"
              @click="labelListClick(i + 1,item.tagName,item.id)">
              <view :class="['pull_down_box',labelItemValue == i + 1?'active':'']">
                {{item.tagName}}
              </view>
            </view>
          </view>
        </van-dropdown-item>
      </van-dropdown-menu>

      <!-- 健康记录内容 -->
      <block v-for="(item,i) in recordsItem" :key="i">
        <pet-record :recordsItem="item" @removeType="removeType"></pet-record>
      </block>


      <!-- <view v-if="storePetrecordItem.length == 0" :style="{height: wh - 80 + 'px'}" class="particilars_box_no">
        <image src="/static/images/mine/gerenno.png" mode="aspectFill"></image>
        <view>该宠物7天内暂无日常健康记录哦</view>
      </view> -->
      <!-- 查看健康趋势 -->
      <!-- <view class="tendency">
        <button type="default" class="tendency_btn">查看健康趋势</button>
      </view> -->


    </view>
    <view class="blankBox" v-if="recordsItem.length == 0">
      <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/2ebf57e8968f91945a73f56a725f8fb3.png" mode="aspectFill"></image>
      <text>你还没有发布记录，快去发布吧！</text>
    </view>
  </view>
</template>

<script>
  import {
    storePetrecord
  } from '@/api/home.js'
  import {
    getLabel,
    gethealthPage
  } from '@/api/remind.js'
  import {
    mapGetters,
    mapActions,
    mapState,
    mapMutations
  } from 'vuex'
  import petRecord from '@/components/pet_record/pet_record.vue'
  export default {
    data() {
      return {
        recordId: 0,
        Defaultdata: new Date(),
        // 健康
        storePetrecordItem: [],
        // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        wh: 0,
        // 标签
        labelList: [],
        labelItemValue: 0,
        productName: '请选择',
        productNameId: 0,
        tagName: '请选择',
        tagId: -1,

        // 当前页
        current: 1,
        recordsList: [],
        recordsItem: []
      };
    },
    onLoad(options) {
      this.recordId = options.recordId
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight
      // 查看行为记录
      // this.storePetrecordList(open)

      if (this.recordId) {
        this.productNameId = this.recordId
        this.productName = options.name
      } else {
        if (this.getRecordItem) {
          this.productName = this.getRecordItem[0].productName
          this.productNameId = this.getRecordItem[0].id
        }
      }

      // 获取标签 / 健康记录
      this.labelListType()
      this.healthPageItem()
    },
    components: {
      'pet-record': petRecord
    },
    computed: {
      ...mapGetters('m_pet', ['getRecordItem'])
    },
    methods: {
      labelListType() {
        getLabel(-1).then(res => {
          this.labelList = res.data
        })
      },
      healthPageItem() {
        const queryType = {
          animalId: this.productNameId,
          current: this.current,
          tagId: this.tagId
        }
        // 获取健康记录
        gethealthPage(queryType).then(res => {
          // console.log(res)
          this.recordsList = res.data
          this.recordsItem = [...this.recordsItem, ...res.data.records]
          this.recordsItem.forEach(item => {
            if (item.sliderImgs) {
              item.sliderImgs = item.sliderImgs.split(',')
            }
          })
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
        })
      },
      labelListClick(i, tagName, id) {
        this.recordsItem = []
        this.current = 1
        this.selectComponent('#tagNameItem').toggle();
        this.labelItemValue = i
        this.tagName = tagName
        this.tagId = id
        this.healthPageItem()
      },
      storePetrecordList(open) {

      },
      productNameClick(productName, id) {
        this.recordsItem = []
        this.current = 1
        this.selectComponent('#productNameItem').toggle();
        this.productName = productName
        this.productNameId = id
        // console.log(this.productNameId)
        this.healthPageItem()
      },
      // 删除
      removeType(id) {
        // console.log(id)
        const recordsItemIndex = this.recordsItem.findIndex(item => item.id == id)
        // console.log(data)
        this.recordsItem.splice(recordsItemIndex, 1)
      }
    }
  }
</script>

<style lang="scss">
  .blankBox{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%,-50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    image{
      width: 184rpx;
      height: 321rpx;
      margin-bottom: 20rpx;
    }
    text{
      font-size: 30rpx;
      color: rgba(61, 61, 61, .5);
    }
  }
  .van-dropdown-menu__title--active{
    color: rgba(61, 61, 61, 1) !important;
  }
  /deep/ .van-dropdown-item--down {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
  }

  /deep/ .van-dropdown-item,
  .van-dropdown-item--down {
    z-index: 2 !important;
  }

  // /deep/ .pull_down {
  //   position: relative;
  //   z-index: 20;
  // }

  page {
    background-color: rgba(245, 245, 245, 1);
  }

  /deep/ .van-dropdown-item {
    .van-popup {
      background-color: transparent !important;
    }
  }

  .particilars_box_footer {
    padding-bottom: 35rpx;

    .pull_down {
      width: 100%;
      // height: 354rpx;
      background-color: rgba(255, 255, 255, 1);
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 50rpx;
      border-bottom-left-radius: 50rpx;
      overflow: hidden;
      padding: 34rpx 24rpx 24rpx;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;

      .pull_down_Item {
        display: flex;
        justify-content: center;
        width: 25%;
        margin-bottom: 22rpx;
        height: 52rpx;

        .pull_down_box {
          width: 156rpx;
          height: 52rpx;
          background-color: rgba(61, 61, 61, 0.06);
          border-radius: 26.5rpx;
          text-align: center;
          line-height: 52rpx;
          font-size: 26rpx;
        }

        .active {
          background-color: rgba(253, 211, 56, 1);
        }
      }

      .pull_down_text {
        width: 100%;
        text-align: center;
        padding: 24rpx 0;
        color: rgba(61, 61, 61, 1);
        font-size: 30rpx;
      }
    }


    .particilars_box_no {
      width: 100%;
      // height: 500rpx;
      // background-color: #0066CC;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      image {
        width: 346rpx;
        height: 199rpx;
      }

      view {
        font-size: 30rpx;
        margin-top: 60rpx;
        color: rgba(61, 61, 61, 0.5);
      }
    }

    .tendency {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 0 24rpx 30rpx;
      box-sizing: border-box;
      background-color: rgba(245, 245, 245, 1);

      .tendency_btn {
        height: 96rpx;
        background-color: rgba(253, 211, 56, 1);
        box-shadow: 0px 12rpx 20rpx rgba(253, 211, 56, 0.3);
        border-radius: 226rpx;
        color: rgba(61, 61, 61, 1);
        font-size: 36rpx;
        line-height: 96rpx;
        font-weight: 500;
      }
    }
  }
</style>
